<template>
  <div class="order">
    <!-- 购物车顶部导航区域 -->
    <nav-comp :back="true" title="订单列表"></nav-comp>
    <!-- 间隔槽-->
    <gap-comp :height="1"></gap-comp>
    <!-- 切换选项卡 -->
    <van-tabs v-model="activeIndex" swipeable @click="changeTabs">
      <van-tab v-for="item in orderText" :key="item.id" :title="item">
        <!-- 无数据 -->
        <van-empty description="暂无订单！" v-if="orderList.length == 0" />
        <!-- 有数据 -->
        <!-- 下拉刷新 -->
        <van-pull-refresh v-model="refreshing" @refresh="onRefresh" v-else>
          <!-- 上拉加载 -->
          <van-list
            v-model="loading"
            :finished="finished"
            finished-text="没有更多了"
            @load="onLoad"
            :immediate-check="false"
          >
            <div class="order_row" v-for="item in orderList" :key="item.id">
              <van-cell :title="item.ordernumber" value="待支付" />
              <van-card
                v-for="m in item.child"
                :key="m.id"
                :price="m.price"
                desc="描述信息"
                :title="m.goodsname"
                :thumb="$pre + m.img"
              />
              <van-row type="flex" justify="end">
                <van-col span="8"
                  ><span class="count_row"
                    >共计{{ item.countnumber }}件商品 合计￥{{
                      item.countmoney
                    }}</span
                  ></van-col
                >
              </van-row>
              <van-row type="flex" justify="space-around">
                <van-col span="4"
                  ><van-button round size="mini">继续付款</van-button></van-col
                >
                <van-col span="4"
                  ><van-button round size="mini">取消交易</van-button></van-col
                >
                <van-col span="4"
                  ><van-button round size="mini">查看物流</van-button></van-col
                >
              </van-row>
            </div>
          </van-list>
        </van-pull-refresh>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeIndex: 0,
      orderText: ["代付款", "待发货", "待收货", "全部订单"],
      params: {
        page: 1,
        size: 5,
        status: 0,
        uid: this.$utils.getUid(),
      },
      loading: false, //是否处于加载状态:bool (没有加载数据：false 数据加载中：true)
      finished: false, //是否已加载完成:bool(有更多数据：false 已完成全部数据加载：true)
      refreshing: false, //是否处于更新中状态:bool (没有加载数据：false 数据加载中：true)
      orderList: [], //订单列表
    };
  },
  mounted() {
    // 获取订单数据
    this.getOrderList();
  },
  methods: {
    // 切换订单数据
    changeTabs(index) {
      this.params.page = 1;
      this.orderList = [];
      this.params.status = index;
      this.finished = false;
      this.getOrderList();
    },
    // 根据搜索状态获取商品订单数据
    getOrderList() {
      this.$api
        .reqOrderList(this.params)
        .then((res) => {
          console.log(res);
          // 检测是否还有新数据拼接
          if (res == null || res.totalPage == 1) {
            this.finished = true;
          }
          // 注意新旧数据拼接 concat  [...]
          this.orderList = this.orderList.concat(res == null ? [] : res.data);

          // 关闭加载开关
          this.loading = false;
          // 关闭刷新动画
          this.refreshing = false;
        })
        .catch((err) => console.log(err));
    },
    // 2.监听页面上拉触底事件
    async onLoad() {
      await this.$utils.delay(1000);
      ++this.params.page;
      this.getOrderList();
    },
    // 3.监听用户的下拉动作
    async onRefresh() {
      await this.$utils.delay(1000);
      this.finished = false;
      this.params.page = 1;
      this.orderList = [];
      this.getOrderList();
    },
  },
};
</script>

<style lang="less" scoped>
.order {
  background: #eee;
  min-height: 100vh;
}

.order_row {
  margin: 15px;
  border-radius: 10px;
  padding: 10px;
  box-sizing: border-box;
  background: white;
}

.van-card {
  margin: 0 !important;
}

.count_row {
  font-size: 20px;
}
</style>
